<template>
    <el-form label-position="left" label-width="100px" :model="formLabelAlign">
        <el-form-item label="图片">
            <el-upload class="mb-4" v-model:file-list="formLabelAlign.fileList"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="标题">
            <el-input v-model="formLabelAlign.title" />
        </el-form-item>
        <el-form-item label="添加正文">
            <el-input v-model="formLabelAlign.content" />
        </el-form-item>
        <el-form-item>
            <el-button type="danger" @click="submitForm(ruleFormRef)">
                发表笔记
            </el-button>
        </el-form-item>
    </el-form>
    <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>
 
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile, FormInstance } from 'element-plus'

const formLabelAlign = reactive({
    title: '',
    content: '',
    fileList: ref<UploadUserFile[]>([])
})
const ruleFormRef = ref<FormInstance>()

// const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
 